[license-img]: https://img.shields.io/github/license/HuolalaTech/page-spy-web?label=License
[license-url]: https://github.com/HuolalaTech/page-spy-web/blob/main/LICENSE
[release-img]: https://img.shields.io/github/package-json/v/HuolalaTech/page-spy-web/release?label=Release
[release-url]: https://github.com/HuolalaTech/page-spy-web/blob/release/package.json
[browser-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-browser?label=Browser&color=orange
[browser-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-browser
[uniapp-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-uniapp?label=UniApp&color=green
[uniapp-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-uniapp
[wechat-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-wechat?label=Wechat&color=green
[wechat-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-wechat
[alipay-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-alipay?label=Alipay&color=blue
[alipay-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-alipay
[taro-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-taro?label=Taro&color=blue
[taro-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-taro
[harmony-ver-img]: https://harmony.blucas.me/badge/version/@huolala/page-spy-harmony?label=Harmony&color=black
[harmony-ver-url]: https://ohpm.openharmony.cn/#/cn/detail/@huolala%2Fpage-spy-harmony
[api-ver-img]: https://img.shields.io/github/v/tag/HuolalaTech/page-spy-api?label=API
[api-ver-url]: https://github.com/HuolalaTech/page-spy-api/tags
[node-deploy]: https://img.shields.io/badge/Node_Deploy-Install-CB3937
[node-deploy-url]: https://pagespy.huolala.cn/#/docs/deploy-with-node
[docker-deploy]: https://img.shields.io/badge/Docker_Deploy-Install-1E63ED
[docker-deploy-url]: https://pagespy.huolala.cn/#/docs/deploy-with-docker
[bt-deploy]: https://img.shields.io/badge/BT_Deploy-Install-20a53a
[bt-deploy-url]: https://pagespy.huolala.cn/#/docs/deploy-with-baota


import React from 'react';
import { Flex } from 'antd';
import bannerImg from '@/assets/image/doc-banner.png';

import logo from '@/assets/image/logo.svg';
import consoleImg from '@/assets/image/screenshot/console-panel.png';
import networkImg from '@/assets/image/screenshot/network-panel.png';
import pageImg from '@/assets/image/screenshot/page-panel.png';
import storageImg from '@/assets/image/screenshot/storage-panel.png';
import systemImg from '@/assets/image/screenshot/system-panel.png';
import whyIsPageSpyImg from '@/assets/image/screenshot/why-is-pagespy-zh.png';
import offlineImg from '@/assets/image/screenshot/offline-panel.png';

export const githubUrl = import.meta.env.VITE_GITHUB_REPO;

<div align="center">
  <img src={logo} height="100" />
  <h1>Page Spy</h1>
  <h5>반드시 사용하게 될 원격 디버깅 플랫폼.</h5>
</div>

## Page Spy란 무엇인가요?#what-is-page-spy

**PageSpy**는 [웹](./browser), [미니프로그램](./miniprogram), [React Native](./react-native), [Harmony OS 앱](./harmony) 등 여러 플랫폼과 호환되는 오픈소스 원격 디버깅 도구입니다.

네이티브 API를 캡슐화하여 네이티브 메서드 호출 시 매개변수를 필터링하고 변환하여 표준 형식으로 디버깅 클라이언트에 전송합니다. 디버깅 클라이언트는 로컬 콘솔과 유사한 인터페이스를 통해 데이터를 직관적으로 표시합니다.

## 왜 Page Spy인가요?#why-is-page-spy

> 백문이 불여일견입니다.

<a href={whyIsPageSpyImg} target="_blank">
  <img src={whyIsPageSpyImg} />
</a>

## 언제 사용하나요?#when-to-use

*로컬에서 콘솔 디버깅을 할 수 없는 모든 상황이 **PageSpy**가 빛을 발할 수 있는 때입니다!*
다음과 같은 시나리오 사례들을 살펴보겠습니다:

- **H5, Webview 애플리케이션의 로컬 디버깅**: 모바일 화면이 너무 작아 기존 디버깅 패널은 조작이 불편하고 표시가 좋지 않으며 정보 잘림이 발생하기 쉽습니다.
- **원격 근무, 지역 간 협업**: 전통적인 소통 방식(이메일, 전화, 화상회의)은 효율이 낮고 장애 정보가 불완전하며 오해와 오판이 발생하기 쉽습니다.
- **사용자 단말기 화면 멈춤 문제 해결**: 데이터 모니터링, 로그 분석 등 전통적인 방법은 문제 해결팀의 비즈니스 및 기술에 대한 깊은 이해에 의존하여 위치 파악 효율이 낮습니다.

PageSpy의 목표는 위와 같은 상황에 처한 사람들을 돕는 것입니다.

## 기능 개요#page-overview

PageSpy는 디버깅 기능을 제공하는 기반 위에서 **온라인 실시간 디버깅**과 **오프라인 로그 재생**의 두 가지 시나리오로 확장됩니다!

### 1. 온라인 실시간 디버깅#online-debugging

- Console 패널: `console.<log | info | warn | error | debug>`로 출력된 로그 정보를 표시하고, 클라이언트에 실행할 코드를 전송할 수 있습니다.

<a href={consoleImg} target="_blank">
  <img src={consoleImg} />
</a>

- Network 패널: 클라이언트에서 발생한 네트워크 요청 정보를 표시합니다.

<a href={networkImg} target="_blank">
  <img src={networkImg} />
</a>

- Element 패널: 클라이언트의 현재 인터페이스를 표시하고, HTML 노드 트리를 확인할 수 있습니다.

<a href={pageImg} target="_blank">
  <img src={pageImg} />
</a>

- Storage 패널: 클라이언트의 로컬 캐시 데이터를 확인합니다.

<a href={storageImg} target="_blank">
  <img src={storageImg} />
</a>

- Systems 패널: 클라이언트의 시스템 정보를 표시하고, 호환성을 확인합니다.

<a href={systemImg} target="_blank">
  <img src={systemImg} />
</a>

이 외에도, 새로운 데이터가 추가되거나 데이터가 변경될 때 실시간으로 알림을 받을 수 있습니다.

### 2. 오프라인 로그 재생#offline-debugging

<a href={offlineImg} target="_blank">
  <img src={offlineImg} />
</a>

높은 유연성을 가지고 있으며, 재생 진행 상황은 사용자가 제어할 수 있습니다. 프로그레스 바의 재생에 따라 클라이언트의 조작 궤적과 해당하는 데이터를 확인할 수 있습니다.
